<template>
  <!-- 选货单详情 -->
  <div>
    <!--信息单 -->
    <div>
      <!-- 第一行 -->

      <div class="hhh">
        <span style="font-weight:bold;position: relative; margin-left:20px;top:15px">选货单详情</span>
        <div class="submitandcancel">
          <el-button type="primary"
                         icon="el-icon-arrow-left">上一页</el-button>
           <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
           <el-button plain
                       icon="el-icon-printer ">打印</el-button>
                        <el-button plain
                       icon="el-icon-s-order">完成</el-button>
                        <el-button plain
                       icon="el-icon-edit">编辑</el-button>
                       <el-button type="primary"
                       icon="el-icon-top-left"
                       @click="back">返回</el-button>
        </div>
        <hr>
      </div>

            <div>
        <span class="infoborder">基本信息</span>
      </div>

      <div>
        <el-descriptions style="margin-top:20px">
          <el-descriptions-item label="品类">{{formdata.goodstype}}</el-descriptions-item>
          <el-descriptions-item label="制单人">{{formdata.documentmaker}}</el-descriptions-item>
          <el-descriptions-item label="制单时间">{{makingtime}}</el-descriptions-item>
          <el-descriptions-item label="单号">{{formdata.ordernum}}</el-descriptions-item>
          <el-descriptions-item label="客户">{{formdata.client}}</el-descriptions-item>
          <el-descriptions-item label="成色">{{formdata.purity}}</el-descriptions-item>
          <el-descriptions-item label="仓库">{{formdata.warehouse}}</el-descriptions-item>
          <el-descriptions-item label="状态">{{formdata.status}}</el-descriptions-item>
          <el-descriptions-item label="部门">{{formdata.department}}</el-descriptions-item>
        </el-descriptions>
      </div>

    <div>
        <span class="infoborder">产品信息</span>
      </div>

      <!-- 产品信息表格 -->
           <el-table :data="selectorderlist"
                style="width: 100%">
        <el-table-column prop="id"
                         type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-table-column prop="goodsinfo"
                         label="产品信息">
        </el-table-column>
        <el-table-column prop="goodsname"
                         label="产品名称">
        </el-table-column>
        <el-table-column prop="barecode"
                         label="条码">
        </el-table-column>
        <el-table-column prop="client"
                         label="客户">
        </el-table-column>
        <el-table-column prop="area"
                         label="区域">
        </el-table-column>
        <el-table-column prop="purity"
                         label="成色">
        </el-table-column>
        <el-table-column prop="weight"
                         label="重量">
        </el-table-column>
        <el-table-column prop="amount"
                         label="数量">
        </el-table-column>
        <el-table-column prop="gforFee"
                         label="克工费">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="float:right"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-sizes="[10, 20, 30]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count:null,
      //制单时间
      makingtime:"",
      //基础信息展示
      formdata: {
        goodstype: '',
        client: '',
        purity: '',
        warehouse: '',
        status:'',
        department: '',
        ordernum: '',
        documentmaker: '',
      },
      selectorderlist: [],
    }
  },
  methods: {
    //返回选货单列表页
    back(){
        this.$router.push({ path: 'selectgoodslist' })
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
  created(){
    var ordernum = this.$route.query.ordernum;
    console.log(ordernum);
      if(ordernum != null){
      this.axios({
        method: 'get',
        url: this.baseUrl+"sales/getdetailbyno",
        params:{
          no:ordernum
        }
      }).then((res)=>{
        console.log(res.data.data);
        this.formdata = res.data.data;
        this.makingtime = res.data.data.makingtime;
        this.count = res.data.data.selectgoodsGoodsinfos.length;
        console.log(res.data.data.status);
        if(res.data.data.status == 0){
          this.formdata.status = "草稿"
        }else{
          this.formdata.status = "已完成"
        }
        this.selectorderlist = res.data.data.selectgoodsGoodsinfos;
      })
    }else{
      // alert(this.$store.state.grades.account);
      this.formdata.documentmaker = this.$store.state.grades.account;
    }
  }
}
</script>

<style scoped>
.but {
  float: right;
}
.submitandcancel {
  margin-left: 1000px;
  margin-top: -13px;
}
.infoborder {
  border-style: solid;
  padding-left: 10px;
  margin-left: 10px;
  border-color: white white white skyblue;
}
</style>
